<template>
  <view>
    <view :style="{height: popUpInfo.height + 'px'}" v-if="onRightMenu">
      <!--  手机展示为历史选择，增加新一列的快捷控制    -->
      <view class="popup-search-bar-on-right">
        <u-search shape="square" :showAction="false" :placeholder="language.searchBar" v-model="searchContent"></u-search>
      </view>
<!--      <scroll-view scroll-x scroll-y :style="{height: rightMenuInfo.height + 'px'}">-->
        <u-list>
          <u-list-item v-for="(i, idx) in getList()" :key="idx">
            <u-button :text="i" @click="tokenChoose(i)"></u-button>
          </u-list-item>
        </u-list>
<!--      </scroll-view>-->
    </view>
    <view v-else>
      <!--  PC使用弹窗解决    -->
      <u-popup :show="show" mode="center" :closeable="true" :overlayOpacity="0.1" @close="closePopup">
        <seg-content-group :style="{height: popUpInfo.height + 'px', width: '420px'}">
          <view class="popup-search-bar">
            <u-search shape="square" :showAction="false" :placeholder="language.searchBar" v-model="searchContent"></u-search>
          </view>
          <scroll-view scroll-y :style="{height: popUpInfo.maxHeight - 50 + 'px'}">
            <uni-table border stripe>
              <uni-tr>
                <uni-th align="center">{{language.date}}</uni-th>
                <uni-th align="center">{{language.operation}}</uni-th>
              </uni-tr>
              <uni-tr v-for="(i, idx) in getList()" :key="idx">
                <uni-th align="center"> {{ i }}</uni-th>
                <uni-th align="center">
                  <u-button type="primary" :plain="true" size="small" @click="tokenChoose(i)" :text="language.button"></u-button>
                </uni-th>
              </uni-tr>
            </uni-table>
          </scroll-view>
        </seg-content-group>
      </u-popup>
    </view>
  </view>
</template>

<script>
import calCommon from "../../utils/winCal/calCommon";
import SegContentGroup from "../seg-content-group/seg-content-group";
import {mapActions, mapState} from "vuex";
import language from "../../api/language";
import appConfig from "../../api/appConfig";
import middleWareService from "../../api/modules/middleWareService";

export default {
  name: "segHistoryPopup",
  components: {SegContentGroup},
  mixins: [calCommon],
  computed: {
    ...mapState('app', ['nowLanguage']),
    ...mapState('componentCommunicate', ['clickHistory', 'clickEachHistory']),
    ...mapState('user', ['userInfo'])
  },
  props: {
    onRightMenu: {
      default: false,
      type: Boolean
    }
  },
  watch: {
    nowLanguage(newVal, oldVal){
      this.language = language.getTranslate(language.segHistoryPopup)
    },
    clickHistory(newVal, oldVal){
      this.show = true
    }
  },
  mounted() {
    this.tableCal()
    this.language = language.getTranslate(language.segHistoryPopup)
    this.getHistoryToken()
  },
  data(){
    return {
      lineInfo: [],
      language: {},
      mode: appConfig.calMode,
      show: false,
      searchContent: '',
      choiceToken: '',
      tokenList: [],
      imgList: []
    }
  },
  methods: {
    ...mapActions({
      setHistoryToken: 'componentCommunicate/setHistoryToken',
      setHistoryImage: 'componentCommunicate/setHistoryImage',
      setDownloadButtonStatus: 'componentCommunicate/setClickEachHistory'
    }),
    getList(){
      if(this.searchContent === ''){
        return this.tokenList
      }else{
        let array = []
        for(let i = 0;i < this.tokenList.length; i++){
          let s = this.tokenList[i]
          if(s.indexOf(this.searchContent) !== -1 ){
            array.push(s)
          }
        }
        return array
      }
    },
    tokenChoose(name){
      this.choiceToken = name
      this.setHistoryToken('')  // 强制清空
      setTimeout(()=>{
        this.setHistoryToken(this.choiceToken)
      }, 100)

      this.getImgList()
    },
    getHistoryToken(){
      const fail = (res) => {
        uni.showModal({
          title: "Error",
          content: this.language.readHistoryFail,
          showCancel: false
        })
      }

      const success = (res)=>{
        if(res.data.code === 200){
          this.tokenList = res.data.data
        }else{
          fail(res)
        }
      }

      middleWareService.historyTokenGet(this.userInfo.userName, success,fail)
    },
    getImgList(){
      const fail = ()=>{
        uni.showModal({
          title: "Error",
          content: this.language.readImgListFail,
          showCancel: false
        })
      }

      const success = (res)=>{
        if(res.data.code === 200){
          this.imgList = res.data.data
          // console.log(this.imgList)
          // debugger
          this.setHistoryImage("[]")  // 强制刷新
          setTimeout(()=>{
            this.setHistoryImage(JSON.stringify(this.imgList))

            // 改进体验
            this.setDownloadButtonStatus(!this.clickEachHistory)
          },100)

        }else{
          fail()
        }
      }

      middleWareService.historyImgGet(this.userInfo.userName, this.choiceToken, success, fail)
    },
    closePopup(){
      this.show = false
    }
  }
}
</script>

<style scoped>
  .popup-search-bar {
    margin: 2% 5%;
  }
  .popup-search-bar-on-right {
    margin: 4% 0;
    width: 220px;
  }

</style>
